<template>
	<view class="container">
		<view class="icon-section">
			<image src="/src/static/image/预约成功.png" mode="widthFix" class="icon" style="width: 150px; height: 170px;" />
		</view>
		<view class="title-section">
			<text class="title">预约成功</text>
		</view>
		<view class="tip-section">
			<text class="tip-text">您已预约成功，请留意参观时间</text>
			<text class="tip-text">避免错过</text>
		</view>
		<view class="button-section">
			<button class="verify-btn" @click="startFaceVerification">
				录入人脸
			</button>
			<button class="verify-btn" type="primary" plain @click="skipFaceUpload">
				跳过录入
			</button>
		</view>



	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import uploadRequest from '../../utils/uploadRequest.js';
	import {
		onLoad,
		onShow,
		onUnload
	} from '@dcloudio/uni-app';
	import {
		ordersApi
	} from '@/package/api/reservationOrders.js';


	// 响应式数据
	const showFaceModal = ref(false);
	const showFaceResultModal = ref(false);
	const faceImage = ref(''); // 图片回显路径
	const faceFileList = ref([]); // 上传组件文件列表
	const isLoadingFace = ref(false);
	const faceResultSuccess = ref(false);
	const faceResultMessage = ref('');

	// 打开人脸识别模态框
	const startFaceVerification = () => {
		uni.navigateTo({
			url: '/package/pages/yuYueTo/yuYueTo'
		});
	};

	// 跳过录入
	const skipFaceUpload = () => {
		uni.setStorageSync("typeId", -1)
		uni.navigateTo({
			url: "/package/pages/myAppointment/myAppointment"
		})
	};

	onUnload(() => {
		uni.switchTab({
			url: "/pages/taxiHailing/taxiHailing"
		})
	})
</script>

<style scoped>
	/* 样式保持不变，无需修改 */
	.container {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 40rpx;
		background-color: #ffffff;
		min-height: 100vh;
	}

	.icon-section {
		margin-bottom: 30rpx;
	}

	.icon {
		width: 160rpx;
		height: 160rpx;
	}

	.title-section {
		margin-bottom: 20rpx;
	}

	.title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333333;
	}

	.tip-section {
		text-align: center;
		margin-bottom: 50rpx;
	}

	.tip-text {
		font-size: 24rpx;
		color: #666666;
		line-height: 1.5;
	}

	.button-section {
		display: flex;
		gap: 40rpx;
		margin-bottom: 60rpx;
	}

	.verify-btn {
		padding: 14rpx 32rpx;
		font-size: 26rpx;
		border-radius: 50rpx;
		color: #1866f2;
		border: 2rpx solid #1866f2;
		min-width: 240rpx;
		background-color: transparent;
		transition: background-color 0.2s;
	}

	.verify-btn:hover {
		background-color: #e6f0ff;
	}

	.modal {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.5);
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 1000;
	}

	.modal-content {
		background-color: #fff;
		border-radius: 20rpx;
		padding: 24rpx;
		width: 80%;
		max-width: 600rpx;
	}

	.modal-header {
		border-bottom: 2rpx solid #e0e0e0;
		margin-bottom: 12rpx;
	}

	.modal-title {
		font-size: 30rpx;
		font-weight: 500;
		color: #333;
	}

	.close-modal {
		font-size: 36rpx;
		color: #666;
		cursor: pointer;
	}

	.face-container {
		padding: 20rpx;
	}

	.face-placeholder {
		border: 2rpx dashed #ddd;
		border-radius: 10rpx;
		padding: 80rpx 0;
		margin-bottom: 30rpx;
		cursor: pointer;
	}

	.loading-indicator {
		margin-top: 20rpx;
		color: #999;
	}

	.result-icon {
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
		margin: 0 auto 20rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 60rpx;
		font-weight: bold;
	}

	.success {
		background-color: #e6f7ff;
		color: #1890ff;
	}

	.fail {
		background-color: #fff2f0;
		color: #ff4d4f;
	}

	.result-message {
		font-size: 28rpx;
		color: #333;
		margin-top: 10rpx;
	}

	.cancel-btn,
	.verify-btn,
	.close-btn {
		padding: 12rpx 28rpx;
		font-size: 24rpx;
		border-radius: 50rpx;
		min-width: 160rpx;
	}

	.cancel-btn {
		color: #666;
		border: 1rpx solid #e0e0e0;
		background-color: #f5f5f5;
	}

	.close-btn {
		color: #fff;
		background-color: #409eff;
		border: none;
	}
</style>